import { Form, Input, InputNumber, Popover, Segmented, Select, Switch } from 'antd'
import { HexColorPicker } from 'react-colorful'
import { StyleSize } from './StyleSize'
import type { ModulePropsObj, ModulePropsTypeVal } from '@/store/Schema'

// import { Display } from './Display';
const { Item } = Form

function CustomerRender(props: {
  type: ModulePropsTypeVal
  componentProps?: Record<string, any>
}) {
  const { type, componentProps, ...innerProps } = props
  if (type === 'boolean') {
    return <Switch {...componentProps} {...innerProps}></Switch>
  }
  else if (type === 'number') {
    return <InputNumber {...componentProps} {...innerProps} />
  }
  else if (type === 'string') {
    return <Input.TextArea {...componentProps} {...innerProps} />
  }
  else if (type === 'options') {
    return (
            <Select style={{ width: '100%' }} {...componentProps} {...innerProps} />
    )
  }
  else if (type === 'valueEnum') {
    const { valueEnum, ...valuProps } = componentProps || {}
    return (
            <Select
                style={{ width: '100%' }}
                {...innerProps}
                {...valuProps}
                options={Object.entries(valueEnum ? componentProps?.valueEnum : {}).map(
                  ([value, label]) => ({ label, value }),
                )}
            />
    )
  }
  else if (type === 'color') {
    return <Popover trigger={['click']} arrow={false} placement="left" content={<HexColorPicker {...componentProps} {...innerProps} />} >
            <div style={{ width: 50, height: 20, borderRadius: 5, cursor: 'pointer', background: (innerProps as any).color || '#ccc' }} />
        </Popover>
  }
  else if (type === 'segmented') {
    return <Segmented block options={componentProps?.options || []} {...componentProps} {...innerProps} />
  }
  else if (type === 'width' || type === 'height') {
    return <StyleSize {...componentProps} {...innerProps} />
  }
  else {
    return null
  }
}

function ItemRender(props: {
  name: string
  itemValue: ModulePropsObj
}) {
  const { name, itemValue } = props
  const valuePropName = itemValue.type === 'boolean'
    ? 'checked'
    : itemValue.type === 'color'
      ? 'color'
      : 'value'
  return (
        <Item
            label={<span className='text-12px text-#8c8c8c'>{itemValue.title}</span>}
            name={name.split('.')}
            key={name}
            valuePropName={valuePropName}
            className="m-b-5px"
        >
            <CustomerRender
                type={itemValue.type}
                componentProps={itemValue.componentProps}
            />
        </Item>
  )
}

export default ItemRender
